<template>
  <div id="support" v-if="data">
    <body>
      <!---------------------------------- 一楼样式结构 ------------------------------>
      <div class="sup1">
        <div class="sup1center">
          <h2>Apple 支持</h2>
          <div>
            <img :src="data[`psp-hero-banner-homepage-welcome.image.large_2x.jpg`]" alt="">
          </div>
        </div>
      </div>
      <!---------------------------------- 二楼样式结构 ------------------------------->
      <div class="sup2">
        <div class="sup2center">
          <div @click="imgOpen(1)">
            <div><img :src="data[`homepage_productnav_iphone_2x.png`]" alt="" ></div>
            <div>iPhone</div>
          </div>
          <div @click="imgOpen(2)">
            <div><img :src="data[`homepage_productnav_imac_2x.png`]" alt=""></div>
            <div>Mac</div>
          </div>
          <div @click="imgOpen(3)">
            <div><img :src="data[`homepage_productnav_ipad_2x.png`]" alt=""></div>
            <div>iPad</div>
          </div>
          <div @click="imgOpen(4)">
            <div><img :src="data[`homepage_productnav_apple_watch_2x.png`]" alt=""></div>
            <div>Watch</div>
          </div>
          <div @click="imgOpen(5)">
            <div><img :src="data[`homepage-productdrawer-airpods-dark_2x.png`]" alt=""></div>
            <div>AirPods</div>
          </div>
          <div @click="imgOpen(6)">
            <div><img :src="data[`homepage_productdrawer_applemusic_2x.png`]" alt=""></div>
            <div>Music</div>
          </div>
        </div>
      </div>
      <!------------------------------- 三楼样式  ------------------------------>
    <div class="sup3">
      <div class="sup3center">
        <div class="sup3type1">
          <img :src="data[`promo-icon-homepage-password_2x.png`]" alt="">
          <button>忘记了 Apple ID 或密码 > </button>
        </div>
        <div class="sup3type2">
          <img :src="data[`promo-icon-homepage-repair_2x.png`]" alt="">
          <button>Apple 维修 > </button>
        </div>
        <div class="sup3type3">
          <img :src="data[`promo-icon-homepage-subscriptions_2x.png`]" alt="">
          <button>账单和订阅 > </button>
        </div>
      </div>
    </div>
      <!--------------------------------- 四楼样式  ------------------------->
      <div class="sup4">
        <div class="center">
          <div class="bc">
            <div class="text-1">
              <h2>搜索主题</h2>
              <div class="pj-text1-content">
                <img :src="data[`download (2).svg`]" />
                <input type="text" placeholder="搜索配件" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-------------------------------- 五楼样式结构 --------------------------->
      <div class="sup5">
        <div class="sup5center">
          <div class="sup5type1">
            <div><img :src="data[`content-link-shareplay_2x.png`]" alt=""></div>
            <div>通过 FaceTime 通话保持联络</div>
            <div>共享体验,共同协作,从任意网页浏览器加入 FaceTime 通话等等。</div>
            <button>开始使用 > </button>
          </div>
          <div class="sup5type2">
            <div><img :src="data[`content-link-watch-workout_2x.png`]" alt=""></div>
            <div>戴着 Apple Watch 进行体能训练</div>
            <div>开启您的健身和健康之旅，并跟踪您的所有活动。</div>
            <button>开始运动 > </button>
          </div>
        </div>
      </div>
      <!--------------------------------- 六楼样式结构 ---------------------------->
      <div class="sup6">
        <div class="sup6center">
          <div class="sup6type1">
            <div>Today at Apple 实时在线课程</div>
            <div>iPhone、iPad 和 Mac 基础入门,跟着我们学起来。</div>
            <div>报名 > </div>
          </div>
          <div class="sup6type2">
            <img :src="data[`featured-section-todayatapple-promo_2x.png`]" alt="">
          </div>
        </div>
      </div>
      <!------------------------------- 七楼样式结构 ------------------------------>
      <div class="sup7">
        <div class="sup7center">
          <div class="sup7type">
          <div>获取支持</div>
          <div>请选取一款产品，我们会为您找到适用的解决方案。</div>
          <button>立即开始 > </button>
          <button>下载 Apple 支持 App > </button>
          </div>
        </div>
      </div>
      <!-- ------------------------------ 八楼样式结构 ------------------------ -->
      <div class="sup8">
        <div class="sup8center">
          <div class="sup8type1">
            <div>通过 Apple Trade In 换购计划进行折抵换购</div>
            <div>用符合条件的设备以旧换新，享受折抵优惠，或者由我们免费为您进行回收处理。Apple Trade In 换购计划能让您和地球都从中受益。</div>
            <button>进一步了解 > </button>
          </div>
          <div class="sup8type2">
            <img :src="data[`featured-section-give-back-trade-in_2x.jpg`]" alt="">
          </div>
        </div>
      </div>
      <!------------------------------ 九楼样式结构 ------------------------------>
      <div class="sup9">
        <div class="sup9center">
          <div class="sup9type1">
            <img :src="data[`applecare-products_2x.png`]" alt="">
          </div>
          <div class="sup9type2">
            <div>来自 Apple 专家的服务与支持</div>
            <div>AppleCare 产品提供来自 Apple 的额外硬件服务选项和专家<br>技术支持。</div>
            <button>了解 AppleCare 计划</button>
          </div>
        </div>
      </div>
      <!-------------------------- 十楼样式结构 ------------------------------>
      <div class="sup10">
        <div class="sup10center">
          <div class="sup10type1">
            <div>我的支持</div>
            <div>集中在一处获取有关您的 Apple 产品的最新信息，包括维修、技术支持案例等等。</div>
            <button>登录“我的支持” > </button>
          </div>
          <div class="sup10type2">
            <img :src="data[`featured-section-my-support_2x.jpg`]" alt="">
          </div>
        </div>
      </div>
      <!-- -------------------------- 十一楼样式结构 ---------------------------------->
      <div class="sup11">
        <div class="sup11center">
          <div class="sup11type1">
            <div>了解 Apple 在中国大陆的服务和<br>保修政策</div>
            <button>了解保修和服务选项 > </button>
          </div>
          <div class="sup11type2">
            <div>查看您的保障服务和支持期限</div>
            <div>进一步了解您的 Apple 有限保修或 AppleCare 产品保障状态。</div>
            <button>立即查看 > </button>
          </div>
        </div>
      </div>
      <!-- ----------------------------  十二楼样式结构 ------------------------ -->
      <div class="sup12">
        <div class="sup12center">
          <div>确保 Apple ID 的安全</div>
          <p>了解一些简单的防护技巧，以确保您的 Apple ID 和信息的安全。</p>
          <button>保护您的 Apple ID > </button>
        </div>
      </div>
      <!-- ----------------------------  十三楼样式结构 -------------------------->
      <div class="sup13">
        <div class="sup13center">
          <div>留心假冒部件</div>
          <p>某些假冒和第三方的电源适配器及电池可能设计不当,有可能会导致安全问题。为了确保您在电池更换时能够获得正品<br>Apple 电池,我们建议您前往 Apple Store 商店或 Apple 授权服务提供商处。如果您需要更换一个新的适配器来为您的<br>Apple 设备充电,我们建议您选择 Apple 的电源适配器。</p>
          <p>此外,非正品显示屏更换件可能会使画质受损,并且可能无法正常工作。Apple 认证的屏幕维修是由可信赖的专家使用<br>Apple 正品部件进行的。</p>
        </div>
      </div>
      <!-- ----------------------------  十四楼样式结构 -------------------------->
      <div class="sup14">
        <div class="sup14center">
          <div>Apple 服务计划</div>
          <button>适用于黑屏问题的 Apple Watch Series 6 服务计划</button>
          <button>适用于“无声音”问题的 iPhone 12 和 iPhone 12 Pro 服务计划</button>
          <button>适用于触控问题的 iPhone 11 显示屏模块更换计划</button>
          <button>15 英寸 MacBook Pro 电池召回计划</button>
          <button>Apple 三插交流电源插头转换器召回计划</button>
          <button>查看所有计划 > </button>
        </div>
      </div>
    </body>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    data() {
      return {
        data: null,
      };
    },
    methods: {
      imgOpen(a){
        switch(a){
          case 1 : 
            this.$router.push({path:'/iphone'})
          ;break
          case 2 : 
            this.$router.push({path:'/mac'})
          ;break
          case 3 : 
            this.$router.push({path:'/ipad'})
          ;break
          case 4 : 
            this.$router.push({path:'/watch'})
          ;break
          case 5 : 
            this.$router.push({path:'/airpods'})
          ;break
          case 6 : 
            this.$router.push({path:'/family'})
          ;break
        }
      },
      getData() {
        let url = "http://localhost:3000/SCHImg";
        axios.get(url).then((res) => {
          this.data = res.data;
          console.log(res.data);
        });
      },
    },
    mounted() {
      this.getData();
    },
    
  };
  </script>
  
  <style lang="less" scoped>
  #watch {
    width: 100%;
    height: 100%;
  }
  </style>
  <style scoped src="../assets/css/support.css"></style>